<template>
	<view class="u-page">
		<div class="body-cont">
			<ul class="content">
				<div class="conlirow">
					<div class="cont-right" style="width:100%;">
						<P class="adress flex">
							<span class="xmname">姓名：</span>
							<span class="name">
								<u-input v-model="Name" type="text" height="100" placeholder="请填写真实姓名" />
							</span>
						</P>
						<P class="adress flex">
							<span class="xmname">电话：</span>
							<span class="name">
								<u-input v-model="PhoneNum" type="number" height="100" placeholder="请填写电话号码" />
							</span>
						</P>
						<P class="adress flex">
							<span class="xmname">地区：</span>
							<span class="name">
								<u-input v-model="Region" type="select" height="100" placeholder="请选择" @click="area_show = true" />
							</span>
							<u-picker mode="region" v-model="area_show" :default-selector="[0]" @confirm="confirmRegion"></u-picker>
							<!-- @confirm="(event) => (Region = `${event.province.label}-${event.city.label}-${event.area.label}`)" -->
						</P>
						
						<P class="adress flex">
							<span class="xmname">街道：</span>
							<span class="name">
								<u-input type="select" v-model="StreetVillage" placeholder="请选择" @click="street_show = true"/>
							</span>
							<u-select v-model="street_show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
						</P>
						
						<P class="adress">
							<span class="xmname" style="">详细地址：</span>
							<span class="name" style="width: 80%;">
								<u-input v-model="Address" type="textarea" height="100" :auto-height="true"
									placeholder="请务必填写详细地址，以防包裹丢失。如：保利花园一期11栋1104或保利花园一期菜鸟驿站。" />
							</span>
						</P>
						<div class="shezhi u-pt-10" style="line-height:50px;">
							<u-switch v-model="checked" size="35" active-color="#e55e97"></u-switch>
							<div class="bianji u-pl-5">设置为默认</div>
						</div>
					</div>
				</div>
				<div class="xzann" @click="saveAddress">保存</div>
			</ul>
		</div>
		<div class="shadow" onClick="closeShadow()"></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Name: '',
				PhoneNum: '',
				Region: '',
				StreetVillage: '',
				Address: '',
				checked: true,
				area_show: false,
				OrUnid: '',
				street_show: false,
				list: []

			};
		},

		onLoad(options) {
			if (this.isNotNull(options.OrUnid)) { //如果传了OrUnid参数则为编辑，否则为新增
				this.OrUnid = options.OrUnid
				this.Name = options.Name
				this.PhoneNum = options.PhoneNum
				this.Region = options.Region
				this.StreetVillage = options.StreetVillage
				this.Address = options.Address
				if (options.DefaultStatus != 1) {
					this.checked = false
				}
				
				// 获取街道乡镇的下拉选择的值
				this.getSelectList();
			}
		},

		methods: {
			
			/**
			 * 获取街道乡镇的下拉选择的值
			 */
			async getSelectList() {
				// 获取街道列表
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Archives',
					wf_num: 'R_Archives_BL027',
					Regin: this.Region,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.list = result.data
				}
			},
			
			/**
			 * 保存收货地址
			 */
			async saveAddress() {
				
				if(!this.isNotNull(this.Name)){
					this.$u.toast("收货人姓名不能为空！");
					return;
				} else if(!this.verificationName(this.Name)){
					this.$u.toast("收货人姓名至少包含一个字母或一个中文！");
					return;
				} else if(!this.isNotNull(this.PhoneNum)){
					this.$u.toast("手机号码不能为空！");
					return;
				} else if(!this.verificationPhone(this.PhoneNum)){
					this.$u.toast("手机号码不合法！");
					return;
				} else if(!this.isNotNull(this.Region)){
					this.$u.toast("所属地区不能为空！");
					return;
				} else if(!this.isNotNull(this.StreetVillage)){
					this.$u.toast("所属街道不能为空！");
					return;
				} else if(!this.isNotNull(this.Address)){
					this.$u.toast("详细地址不能为空！");
					return;
				}
				
				let DefaultStatus = 0
				if (this.checked) {
					DefaultStatus = 1
				}
				
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Archives',
					wf_num: 'R_Archives_BL024',
					OrUnid: this.OrUnid,
					Name: this.Name,
					PhoneNum: this.PhoneNum,
					Region: this.Region,
					StreetVillage: this.StreetVillage,
					Address: this.Address,
					DefaultStatus: DefaultStatus,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.showMSG('success', '保存成功')
					setTimeout(() => {
						this.goBack()
					}, 1500)
				} else {
					this.showMSG('error', '保存失败');
					/* setTimeout(() => {
						this.goBack()
					}, 1500) */
				}
			},
			
			/**
			 * 确认选择地区
			 * @param {Object} event
			 */
			async confirmRegion(event) {
				console.log("确认选择地区....");
				console.log(event);
				this.Region = event.province.label + '-' + event.city.label + '-' + event.area.label;
				this.StreetVillage = "";
			
				if (this.isNotNull(event.area.value)) {
			
					// 先清空数组
					this.list.splice(0, this.list.length);
			
					// 获取街道列表
					const userInfo = uni.getStorageSync('userInfo');
					let result = await this.$u.api.unifyRequest({
						userId: userInfo.userId,
						nickName: userInfo.nickName,
						appid: 'Archives',
						wf_num: 'R_Archives_BL027',
						provinceCode: event.province.value,
						cityCode: event.city.value,
						areaCode: event.area.value,
						loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						this.list = result.data
					}
				}
			},
			
			/**
			 * 确认选择街道乡镇
			 * @param {Object} event
			 */
			confirm(event) {
				console.log("确认选择街道乡镇....");
			    console.log(event);
				this.StreetVillage = event[0].label + '-' + event[1].label;
			},

		},
	};
</script>

<style scoped>
	.body-cont {
		padding-left: 18px;
		padding-right: 18px;
	}

	.content {
		padding-top: 20px;
	}

	ol,
	ul {
		list-style: none;
	}

	.conlirow {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 0px;
	}

	.cont-right {
		display: flex;
		flex-direction: column;
	}

	.cont-right p {
		width: 100%;
	}

	.adress {
		border-bottom: rgba(59, 53, 60, 0.1) dashed 1px;
	}

	.adress span {
		font-size: 16px;
		height: 50px;
		line-height: 50px;
	}

	.xmname {
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		line-height: 22px;
	}

	.name {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		letter-spacing: 0;
		line-height: 22px;
	}

	input {
		width: 80%;
		color: #000;
	}

	input {
		border: none;
		outline: none;
		font-size: 14px;
	}

	input,
	select {
		vertical-align: middle;
	}

	.shezhi {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5px 0px;
	}

	.bianji {
		font-size: 14px;
		color: #e55e97;
		letter-spacing: 0;
	}

	.bianji label img {
		width: 16px;
		margin-top: 5px;
	}

	.xzann {
		width: 100%;
		text-align: center;
		background: #e55e97;
		border-radius: 9px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: #FFFFFF;
	}

	.flex {
		display: flex;
	}
</style>